<template>
  <div class="app-container">
    <div class="block">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-input
            v-model="queryParams.restaurantId"
            placeholder="店铺id"
          />
        </el-col>
        <el-col :span="4">
          <el-input v-model="queryParams.orderId" placeholder="订单ID" />
        </el-col>

        <el-col :span="8">
          <el-button
            type="success"
            icon="el-icon-search"
            @click.native="getOrderList"
          >搜索</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click.native="reset"
          >重置</el-button>
        </el-col>
      </el-row>
      <br>
    </div>

    <el-table
      v-loading="listLoading"
      :data="orderList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="用户ID">
              <span>{{ props.row.userId }}</span>
            </el-form-item>
            <el-form-item label="店铺ID">
              <span>{{ props.row.restaurantId }}</span>
            </el-form-item>
            <el-form-item label="收货地址">
              <span>{{ props.row.userAddress }}</span>
            </el-form-item>
            <el-form-item label="下单时间">
              <span>{{ props.row.time }}</span>
            </el-form-item>
            <el-form-item label="订单描述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
            <el-form-item label="支付方式">
              <span>{{ getPayMethod(props.row.payMethod) }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="订单id" prop="orderId" />
      <el-table-column label="总价格" prop="totalPrice" />
      <el-table-column label="配送费" prop="deliveryPrice" />
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag
            :type="getTagType(scope.row.status)"
            size="middle"
          >{{ getStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getOrderList" />
  </div>
</template>

<script>
import { getOrders } from '../../api/ec/orders'

export default {
  name: 'Order',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        restaurantId: null,
        userId: null,
        userAddress: null,
        time: null,
        totalPrice: null,
        status: null,
        description: null,
        payMethod: null,
        deliveryPrice: null,
        communityId: null
      },
      total: 0,
      list: null,
      orderList: [
        {
          orderId: null,
          restaurantId: null,
          userId: null,
          userAddress: null,
          time: null,
          totalPrice: null,
          status: null,
          description: null,
          payMethod: null,
          deliveryPrice: null,
          communityId: null
        }
      ],
      // orderList: [
      //   {
      //     restaurant_id: '1',
      //     restaurant_name: '演示',
      //     restaurant_address: '北京',
      //     total_amount: 104,
      //     id: '1',
      //     user_name: '9',
      //     address: '1',
      //     status_bar: { title: '支付超时' }
      //   },
      //   {
      //     restaurant_id: '1',
      //     restaurant_name: '演示',
      //     restaurant_address: '北京',
      //     total_amount: 14,
      //     id: '2',
      //     user_name: '9',
      //     address: '1',
      //     status_bar: { title: '支付成功' }
      //   },
      //   {
      //     restaurant_id: '1',
      //     restaurant_name: '演示',
      //     restaurant_address: '北京',
      //     total_amount: 114,
      //     id: '3',
      //     user_name: '9',
      //     address: '1',
      //     status_bar: { title: '支付失败' }
      //   },
      //   {
      //     restaurant_id: '1',
      //     restaurant_name: '演示',
      //     restaurant_address: '北京',
      //     total_amount: 14,
      //     id: '4',
      //     user_name: '9',
      //     address: '1',
      //     status_bar: { title: '支付成功' }
      //   },
      //   {
      //     restaurant_id: '1',
      //     restaurant_name: '演示',
      //     restaurant_address: '北京',
      //     total_amount: 14,
      //     id: '5',
      //     user_name: '9',
      //     address: '1',
      //     status_bar: { title: '支付成功' }
      //   }
      // ],
      listLoading: false,
      selRow: {},
      expandRowData: []
    }
  },
  mounted() {
    this.getOrderList()
  },
  methods: {
    getTagType(value) {
      if (value === 1) {
        return 'success'
      } else {
        if (value === 2) {
          return 'warning'
        } else {
          return 'danger'
        }
      }
    },
    getStatus(value) {
      if (value === 1) {
        return '已完成'
      } else {
        if (value === 2) {
          return '配送中'
        } else {
          return '已取消'
        }
      }
    },
    getPayMethod(value) {
      if (value === 1) {
        return '微信支付'
      } else {
        return '余额支付'
      }
    },
    getOrderList() {
      getOrders(this.queryParams).then(response => {
        console.log(response)
        console.log(this.queryParams)
        this.orderList = response.rows
        this.total = response.total
      })
    }
  }
}
</script>

<style scoped>
  /deep/.demo-table-expand {
    font-size: 0;
  }
  /deep/.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  /deep/.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  /deep/.table_container {
    padding: 20px;
  }
  .Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
  }
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  /deep/.avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
